<template>
	<view>
		<headerNav :navRightIcon="false" leftIconColor="#fff" title="群成员" title-color="#ffffff"/>
		<view class="relative_1" style="margin: 36rpx auto;background-color: #FFFFFF;box-sizing: border-box;padding:20rpx 30rpx;border-radius: 20rpx;width: 92%;">
			<view style="overflow: hidden;" class="flex">
				<view style="width: 110rpx;overflow: hidden;">
					<image :src="info.avatar" style="width: 110rpx;height: 110rpx;border-radius: 50%;display: block;" mode=""></image>
				</view>
				<view style="padding: 10rpx 0 0 26rpx;" class="flex-1">
					<view style="color: #000000;font-size: 30rpx;font-weight: 600;line-height: 50rpx;" class="yihang bold">
						{{info.name || ''}}
					</view>
					<view style="color: #666;font-size: 24rpx;line-height: 50rpx;" class="yihang bold">
						{{info.introduction || ''}}
					</view>
				</view>
			</view>
		</view>
		<view class="relative_1" style="margin: 28rpx auto;background-color: #FFFFFF;box-sizing: border-box;padding:0 40rpx 10rpx;border-radius: 20rpx;width: 92%;">
			<view style="line-height: 100rpx;color: #000;font-size: 24rpx;" class="bold">
				群成员（{{member_num || 0}}人）
			</view>
			<view v-for="(item,index) in list" :key='index' style="overflow: hidden;margin-bottom: 30rpx;">
				<view @click="goUser(item.from_account)" style="width: 88rpx;height: 88rpx;float: left;overflow: hidden;">
					<image :src="item.client.avatar" style="width: 100%;height: 100%;display: block;border-radius: 50%;" mode=""></image>
				</view>
				<view style="max-width: 50%;float: left;line-height: 88rpx;margin: 0 20rpx;font-size: 26rpx;color: #000;font-weight: 600;" class="yihang">
					{{item.name || ''}}
				</view>
				<view @click="yichu(index,item.id)" v-if="group_admin==1 && item.delete_check==1" class="yichu">
					移除群聊
				</view>
			</view>
			<view style="text-align: center;margin-top: 20rpx;">
				<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
				<view style="width: 80%;margin: 0 auto;">
					<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
					<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="list.length>0 && enmpy"></u-divider>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:'',
				page:1,
				list:[],
				enmpy:false,
				kk:false,
				info:{},
				group_admin:'',
				member_num:''
			}
		},
		onLoad(option) {
			this.id=option.id
			this.qun_chengyuan()
		},
		onReachBottom: function() {
			console.log(222222222)
			if (this.enmpy) {
				return
			} else {
				this.qun_chengyuan()
			}
		},
		methods:{
			goUser(id) {
				this.post('api/im/im/friend_info',{client_mobile:id},true).then(res=>{
					if(res.code==1){
						uni.navigateTo({
							url:'/fenbao/pages/wenzhang/yhxx?id='+res.data.id
						})
					}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
				})

				// uni.navigateTo({
				// 	url: '/im/information/information?index=2&id=' + id + '&url=' + avatar + '&nick=' + nick,
				// });
			},
			qun_chengyuan:function(){
				this.post('api/im/im/group_member_list',{group_id:this.id,page:this.page,limit:15},true).then(res=>{
					this.info=res.data.info
					this.group_admin=res.data.group_admin
					this.member_num=res.data.total
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 15) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 15) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			yichu:function(index,id){
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要移除该成员吗？',
					success: function (res) {
						if (res.confirm) {
							that.post('api/im/im/kick_member',{group_id:that.id,member_id:id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									that.list.splice(index,1)
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		font-family: Demibold;
	}
	.yichu{
		width: 170rpx;
		height: 50rpx;
		background: #F8F8F8;
		border-radius: 25rpx;
		text-align: center;
		line-height: 50rpx;
		float: right;
		font-size: 24rpx;
		color: #333333;
		margin-top: 19rpx;
		// font-weight: 600;
	}
</style>